<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="//unpkg.com/layui@2.8.17/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<script src="../../../javascript/react.js"></script>
<script src="../../../javascript/react-dom.js"></script>
<script src="../../../javascript/babel.js"></script>
<script type="text/babel">
    class App extends React.Component {
        constructor(props) {
            super(props)
            this.state = {flag: true}
        }

        render() {
            const {flag} = this.state
            return (
                <div>
                    <button onClick={this.changeFlag}>切换</button>
                    {/*销毁了元素*/}
                    {flag && <h1>我显示了</h1>}
                    {flag ? <h1>我显示了</h1> : ""}
                    {/*没有销毁元素使用的是display*/}
                    <h1 style={{display: flag ? "block" : "none"}}>我显示了</h1>
                </div>
            )
        }

        changeFlag = () => {
            this.setState((state) => {
                return {flag: !state.flag}
            })
        }
    }

    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<App/>)
</script>
</body>
</html>
